<template>
  <div>
    <h1>{{ userName }}</h1>
    <div>
      <!-- <el-dialog title="表单" :visible.sync="dialogVisible" width="45%">
        <span>子组件弹出框</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >发起合同审批</el-button
          >
        </span>
      </el-dialog> -->
    </div>
    <div class="content">
      <div class="topV">
        <!-- <image class="topV-img" src="../../static/fd_008.png"></image> -->
        <div class="topV-text">我是顶部广告信息</div>
        <div class="topV-text">1111</div>
      </div>

      <!-- 中间列表 -->
      <tableView class="centerV" ref="children" :pLists="lists" @didClick="didClick111"></tableView>
      <!-- <other></other> -->
      <div class="bottomV">
        <!-- 合作服务协议 -->
        <div class="btm-agreeV">
          <div class="agreeV-left" @click="didClickAgree">
            <image
              class="aLeft-img"
              :src="
                isAgree ? '../../static/fd_012.png' : '../../static/fd_011.png'
              "
            ></image>
            <div class="aLeft-text">阅读并同意</div>
          </div>
          <div class="agreeV-right" @click="didClickService">
            《合作服务协议》
          </div>
        </div>
        <!-- 发布按钮 -->
        <div class="btm-releaseV" @click="didClickBtn">
          <div class="releaseV-text">发布</div>
        </div>
      </div>
    </div>

    <div style="height: 94upx"></div>
    <div class="phoneV" @click="didClickPhone">
      <div class="phoneV-normalText">如有其他疑问请咨询：</div>
      <div class="phoneV-highlightedText">{{ phone }}</div>
    </div>
  </div>
</template>

<script>
import tableView from './listView.vue';
// import other from "./other.vue";
import { userName, getUserName } from "./zh";
import axios from "axios";
export default {
  data() {
    return {
        userName,
      dialogVisible: true,
      isAgree: false, // 是否勾选合作服务协议
      phone: "123456", // 客服电话
      lists: [
        [
          {
            icon: "../../static/fd_001.png",
            title: "第一组第一行",
            subTitle: "",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_013.png",
            rightIconType: 0, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
          {
            icon: "../../static/fd_002.png",
            title: "第一组第二行",
            subTitle: "",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_010.png",
            rightIconType: 1, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
        ],
        [
          {
            icon: "../../static/fd_003.png",
            title: "第二组第一行",
            subTitle: "",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_010.png",
            rightIconType: 1, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
          {
            icon: "../../static/fd_004.png",
            title: "第二组第二行",
            subTitle: "(非必填)",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_010.png",
            rightIconType: 1, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
          {
            icon: "../../static/fd_005.png",
            title: "第二组第三行",
            subTitle: "(另外描述)",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_013.png",
            rightIconType: 0, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
        ],
        [
          {
            icon: "../../static/fd_006.png",
            title: "第三组第一行",
            subTitle: "200元",
            subTitleType: 1, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "右边占位说明",
            detail: "",
            rightIcon: "../../static/fd_009.png",
            rightIconType: 2, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 0, // 0:普通样式 1:输入框样式
            inputType: "", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "", // 当rightType==1时，该值有效。
            inputUnit: "", // 当rightType==1时，该值有效。
          },
        ],
        [
          {
            icon: "../../static/fd_006.png",
            title: "第四组第一行",
            subTitle: "",
            subTitleType: 0, // 0:#AAAAAA 12px 1:#FFAC1C 14px
            detailPlaceholder: "",
            detail: "",
            rightIcon: "",
            rightIconType: 0, // 0:蓝色下箭头 1:灰色右箭头 2:问好图标
            rightType: 1, // 0:普通样式 1:输入框样式
            inputType: "number", // 当rightType==1时，该值有效。text文本，number数字，idcard身份证 digit带小数点的数字键盘
            inputPlaceholder: "输入框占位说明", // 当rightType==1时，该值有效。
            inputUnit: "(元)", // 当rightType==1时，该值有效。
          },
        ],
      ],
    };
  },
  onLoad() {},
  watch: {
    isAgree(){
      if (this.isAgree== true) {
        console.log('true');
      } else {
        console.log('false');
      }
    }
  },
  methods: {
    keyDown(e) {
      if(e.keyCode == 13) {
        console.log('press key down');
      }
    },
    // 点击勾选按钮
    didClickAgree: function () {
      this.isAgree = !this.isAgree;
      // console.log(this.isAgree);
       const user = getUserName();
       console.log('user'+user);
    },
    // 点击合作服务协议
    didClickService: function () {
      console.log(this.$route.path);
      console.log("点击合作服务协议");
      this.$router.push('/home')
      // const url = 'https://www.baidu.com'; 
      // axios.post(url, null).then(response=>{
      //   console.log(response.data);
      // }).catch(error=>{
      //   console.error(error);
      // })
    },
    // 点击发布按钮
    didClickBtn: function () {
      var message = "";
      var datas = this.lists;
      for (let i = 0; i < datas.length; i++) {
        var item = datas[i];
        if (message || message.length != 0) break;
        for (let j = 0; j < item.length; j++) {
          var subItem = item[j];
          if (!subItem.detail || subItem.detail.length == 0) {
            var title = subItem.title;
            if (title == "第一组第一行") {
              message = "请选择第一组第一行的内容";
            } else if (title == "第一组第二行") {
              message = "请选择第一组第二行的内容";
            } else if (title == "第二组第一行") {
              message = "请选择第二组第一行的内容";
            } else if (title == "第二组第三行") {
              message = "请选择第二组第三行的内容";
            } else if (title == "第四组第一行") {
              message = "请在第四组第一行输入内容";
            }
            // 跳出循环
            break;
          }
        }
      }

      if (message.length != 0) {
        // uni.showToast({
        //     title: message,
        //     icon: 'none',
        //     duration: 2000
        // })
        return;
      }
      if (!this.isAgree) {
        // uni.showToast({
        //     title: '请阅读并同意《合作服务协议》',
        //     icon: 'none',
        //     duration: 2000
        // })
        return;
      }

      console.log("可以发布了");
    },
    // 点击客服电话
    didClickPhone: function () {
      console.log("点击客服电话");
      
    },
    // 点击每一行
    didClick111(title) {
      if (title == "第一组第一行") {
        console.log("点击第一组第一行");
        // 获取到的是组件实例，可以使用组件的所有方法
        this.$refs.children.setDetailValue(
          "第一组第一行",
          "第一组第一行内容zhu"
        );
      } else if (title == "第一组第二行") {
        this.$refs.children.setDetailValue("第一组第二行", "第一组第二行内容");
      } else if (title == "第二组第一行") {
        this.$refs.children.setDetailValue("第二组第一行", "第二组第一行内容");
      } else if (title == "第二组第二行") {
        this.$refs.children.setDetailValue("第二组第二行", "第二组第二行内容");
      } else if (title == "第二组第三行") {
        this.$refs.children.setDetailValue("第二组第三行", "第二组第三行内容");
      } else if (title == "第三组第一行") {
        this.$refs.children.setDetailValue("第三组第一行", "第三组第一行内容");
      }
    },
  },

  components: {
    // other,
    tableView
  },
  mounted(){
    window.addEventListener('keydown',this.keyDown)
    
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false)
  }
};
</script>

<style>
page {
  background-color: rgb(241, 241, 241);
}

.content {
}

/* 最顶部内容 */
.topV {
  background-color: #c32c2c;
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.topV-img {
  margin-left: 30upx;
  margin-right: 10upx;
  width: 32upx;
  height: 32upx;
}

.topV-text {
  color: #ff9500;
  font-family: PingFang-SC-Medium;
  font-size: 28upx;
  margin-left: 30px;
}

/* 中间内容 */
.centerV {
  margin-top: 40px;
}

/* 底部内容 */
.bottomV {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

/* 服务协议 */
.btm-agreeV {
  display: flex;
  flex-direction: row;
  height: 34px;
  align-items: baseline;
}

.agreeV-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.aLeft-img {
  width: 28upx;
  height: 28upx;
  margin-right: 20upx;
  margin-left: 30upx;
}

.aLeft-text {
  font-family: PingFang-SC-Medium;
  font-size: 30px;
  color: #787878;
}

.agreeV-right {
  font-family: PingFang-SC-Medium;
  font-size: 20px;
  color: #3abbff;
}

/* 发布按钮 */
.btm-releaseV {
  margin-top: 60px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 100px;
  background-color: #3abbff;
  height: 88px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.releaseV-text {
  font-family: PingFang-SC-Medium;
  color: #ffffff;
  font-size: 34upx;
}

/* 客服电话 */
.phoneV {
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  line-height: 60px;
  background-color: rgb(241, 241, 241);
  z-index: 999;
}

.phoneV-normalText {
  font-family: PingFang-SC-Medium;
  color: #d42222;
  font-size: 28upx;
}

.phoneV-highlightedText {
  font-family: PingFang-SC-Medium;
  color: #000;
  font-size: 40px;
}
</style>
